<div class="generic-instance-settings">
  <form aria-label={label} ref:form>
    {#each options as option, i (option.key) }
      {#if i > 0}
        <br>
      {/if}
      <input type="checkbox"
             id="instance-option-{option.key}"
             name="{option.key}"
             on:change="onChange(event)"
      >
      <label for="instance-option-{option.key}">
        {option.label}
      </label>
    {/each}
  </form>
</div>
<GenericInstanceSettingsStyle/>
<script>
  import GenericInstanceSettingsStyle from './GenericInstanceSettingsStyle.html'
  import { store } from '../../../_store/store.js'

  export default {
    oncreate () {
      const { instanceName, options } = this.get()
      const { form } = this.refs
      for (const { key, defaultValue } of options) {
        form.elements[key].checked = this.store.getInstanceSetting(instanceName, key, defaultValue)
      }
    },
    methods: {
      onChange (event) {
        const { instanceName } = this.get()
        const { target } = event
        this.store.setInstanceSetting(instanceName, target.name, target.checked)
      }
    },
    store: () => store,
    components: {
      GenericInstanceSettingsStyle
    }
  }
</script>
